var remainMinutes = 0.5;//默认配置倒计时5分钟
var remainSeconds = remainMinutes*60;
var timer = "";
var id = "";//当前座位索引
$(function () {
	//获取位置信息
	$.ajax({
		type:"get",
		url:"json/index.json",
		async:true,
		success:function (res) {
			console.log(res);
			if (res.success) {
				var str = '<ul class="rows clearfix">';
		  		$.each(res["data"],function (key,val) {
		  			console.log(val);
		  			if(key*1%9 == 0){
		  				str += `<li data-index="${key}" class="${formatClass(val)}">${key}</li></ul><ul class="rows clearfix">`;
		  			}else{
		  				str += `<li data-index="${key}" class="${formatClass(val)}">${key}</li>`;
		  			}
		  		})
		  		$("#seatDetail").html(str+'</ul>');
		  		$(".remainNum").text(res.remain);
		  		
		  		//满座   状态栏显示开始排队按钮  隐藏座位状态
		  		//开始排队后  显示当前队列位置
		  		//入座前  显示占座倒计时
		  		//入座后  显示当前座位号，可实现离开操作
		  		
		  		
		  		
			} else{
				$.alert("获取数据出错！");
			}
		}
	});
	//占位
	$("#seatDetail").on("tap","li",function () {
		var _this = this;
		if ($(this).hasClass("occupied")) {
			$.alert('当前座位已被占用，请选择未占用的位置！');
			return false;
		}else if($(this).hasClass("mine")){
			$.alert('您已经占过该位置，请勿重复占用！');
			return false;
		}else{
				id = $(this).attr("data-index");
			var isOccupied = false; //是否已有占据的位置
			var mineLength = $("#seatDetail .mine").length;
			var minIndex = "";//已占据位置的索引
			if(mineLength){
				isOccupied = true;
				minIndex = $("#seatDetail .mine").attr("data-index");
			}else{
				isOccupied = false;
			}
			//换座位，重新计时
			if (isOccupied) {
				$.alert("当前已占座位"+minIndex+",是否切换到新的座位"+id+"？",function () {
					loadAjax(_this,function () {
						$(".mine").removeClass("mine");
						$(_this).addClass("mine");
						$("#seatStatus").html('<small>您的座位号是<span id="userNumber">'+ id +'</span>，入座剩余时间：<a href="javascript:;"><i class="minutes">5</i>分<i class="seconds">0</i>秒</a></small>');
						clearInterval(timer);
						remainSeconds = remainMinutes*60;
						countDown(remainSeconds);
						timer = setInterval("countDown(remainSeconds)",1000);
					})
					
				});
			}else{
				loadAjax(_this,function () {
					$.alert("占座成功,将为您保留五分钟！",function () {
						$(_this).addClass("mine");
						var remainNum = $(".remainNum").text();
						$(".remainNum").text(remainNum*1-1);
						$("#seatStatus").html('<small>您的座位号是<span id="userNumber">'+ id +'</span>，入座剩余时间：<a href="javascript:;"><i class="minutes">5</i>分<i class="seconds">0</i>秒</a></small>');
						clearInterval(timer)
						remainSeconds = remainMinutes*60;
						countDown(remainSeconds);
						timer = setInterval("countDown(remainSeconds)",1000);
					});
				})
			}	
		}
		
	})
})

function formatClass (data) {
	var value = "";
	if (data) {
		value = "occupied";
	} else{
		value = "";
	}
	return value
}
//倒计时
function countDown (sec) {
	var timeArr = [];
	timeArr[0] = Math.floor(sec / 60);
	timeArr[1] = sec % 60;
	$("#seatStatus .minutes").text(timeArr[0]);
	$("#seatStatus .seconds").text(timeArr[1]);
	if(remainSeconds == 0){
		clearInterval(timer);
		//ajax发送id释放当前座位
		$(".mine").removeClass("mine");
		$("#seatStatus").html('<a href="javascript:;"><small>剩余座位<span class="remainNum">0</span>个，点击下方选择座位</small></a>');
		$(".remainNum").text($(".remainNum").text()*1+1);
	}
	remainSeconds--;
	return timeArr
}

function loadAjax (_this,callback) {
	$.ajax({
		type:"get",
		url:"json/index.json",
		data:{
			"id":id,
			"userId":"zhangqianfeng"
		},
		async:true,
		dataType:"json",
		success:function (res) {
			console.log(res);
			if(res.success){
				if(callback){
					callback();
				}
			}else{
				$.alert("手慢了，座位被别人占用了！")
			}
		}
	})
}
